<template>
  <div class="order-batch-receipt">
    <ReceiptForm v-model="receipt"
                 :hidden-fields="hiddenFields" />
    <div class="order-batch-footer">
      <el-button type="default"
                 @click="handleCancel">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="handleSubmit">确定</el-button>
    </div>
  </div>
</template>
<script>

import { dialogFulfill } from '@tablra/fulfill/executors/RequestExecutor'
import { mapState, mapActions } from "vuex";

import axios from "axios";
export default {
  name: "OrderBatchReceipt",
  props: {
    value: Object
  },
  data () {
    return {
      hiddenFields: ["receiptDesc", "receiptSignTime", "syncUpAttachments"],
      receipt: {
        receiptDesc: "",
        receiptType: 0,
        receiptTime: this.$moment(new Date()).format("YYYY-MM-DD 23:59:00"),
        receiptSignTime: null
      },
      // result: {},
      // loading: false,
      // visible: false,
      loading: false,
    }
  },
  computed: {
    ...mapState({
      batchReceiptId: (state) => state.batch.batchReceiptId,
    }),
    selection () {
      return this.value?.selection;
    },
    orderIds () {
      return this.selection
        .filter(item => !item.exceptions)
        .map(({ orderId }) => orderId);
    },
    idCountExceeded () {
      return this.orderIds?.length || 0
    },
    taskUrl () {
      return `/tenant/task/{id}`
    },
    // title () {
    //   return this.batchValue?.title || "提示"
    // },
    // dialogWidth () {
    //   return this.batchValue?.width || "420px"
    // },
  },
  created () {

  },
  methods: {
    ...mapActions({
      setBatchReceiptId: "batch/setBatchReceiptId",
    }),
    async handleSubmit () {
      const response = await this.receipts()
      this.setBatchReceiptId(response)
      if (this.batchReceiptId) {
        this.$emit("cancel");
        const component = {
          taskUrl: this.taskUrl,
          count: this.idCountExceeded,
          name: `批量回单`,
          id: this.batchReceiptId || response
        }
        dialogFulfill.invoke(component)
      }
    },
    async receipts () {
      this.loading = true
      const url = `/order/batch/receipt`
      const receipt = {
        exception: this.receipt.receiptType,
        receiptTime: this.receipt.receiptTime,
        orderIds: this.orderIds,
        name: "批量回单"
      }
      try {
        const response = await axios.post(url, receipt);
        if (response?.code === 0) {
          if (!response?.data) {
            this.loading = false
            this.$emit("confirm");
          }
          return response?.data;
        } else {
          this.loading = false;
          this.$message({ type: "error", message: response?.message });
        }
      } catch (error) {
        this.loading = false;
      }
    },
    handleCancel () {
      this.$emit("cancel");
    }
  }
}
</script>
<style scoped>
.order-batch-footer {
  text-align: end;
}
.dialog-box {
  font-size: 16px;
  display: flex;
  align-items: center;
}
.loading-box {
  width: 20px;
  height: 20px;
}
/* .loading-box >>> .el-loading-spinner .circular {
  width: 20px !important;
  height: 20px !important;
} */
.loading-box >>> .el-loading-spinner {
  top: 100% !important;
  /* margin-right: 5px; */
}
.loading-txt {
  padding-left: 5px;
}
</style>